<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>transform变换</title>
  <style>
    /* 
  
  1.transform:translate(x,y)  translatex()  translatey()  位移  -  
  位置的移动  
  +  margin 外间距  - 负值  +  正值
  +  position-方位 - top/bottom/left/right
  +  translate 位移 -  居中

  2.transform:scale(x,y)  scaleX()  scaleY()  缩放 - 宽度，高度

   */
    * {
      margin: 0;
      padding: 0;
    }
    body{
      background-color: #000;
    }
    li {
      list-style: none;
    }

    .main {
      margin: 50px auto 0;
      overflow: hidden;
      width: 1226px
    }

    .left {
      float: left;
      width: 234px;
      height: 614px;
      background-color: gold;
    }

    .right {
      float: left;
      width: 992px;
      height: 614px;
    }

    .right li {
      float: left;
      width: 234px;
      height: 260px;
      background-color: green;
      padding: 20px 0;
      margin: 0 0 14px 14px;
       /* css属性 :transform  0,0  =>  0 -5  
       技巧: 为了鼠标移入移出中都有过渡动画的效果 - transition加在没有hover元素本身的身上
        */
       transition: all  1s ease;
    }

    .right li:hover {
      /* transition 一起使用 - 过渡 */
      /* transform: translateY(-5px); */
      transform: translate(0, -5px);
    }


    /* PC -  版心居中 width(< 父元素总宽度) + margin:0 auto
    图片间距: display:block +  vertical-align:middle/top/bottom + line-height + font-size:0
    overflow：hidden溢出隐藏  +  清除浮动 +  margin重叠 +  定宽自适应两列布局......
    padding-left:20px;  计算在容器面积大小  => margin  +  外层嵌套div
    box-sizing:border-box;  (padding + border  不包含margin)
    计算函数 calc(%  -  px)  +   flex  +  width  具体  
     
     */
    .wrap{width:1226px;margin:0 auto;}
    .item{float:left;width:calc(33.33% - 20px);height:234px;margin-left:20px;overflow:hidden}
    .item:first-child{margin:0; }
    .item img{width:100%;height:100%;display: block;transition: all  1s ease;}
    .item:hover img{
      /* 结合 transition 过渡  */
      transform: scale(1.5);
     
    }


    /* transform:rotate(deg)  角度  rotateX() rotateY() rotateZ()  +  transform-origin:基点固定 
       position:absolute/fixed（固定）
       rgb  a  =  颜色(0,0,0 黑色)  + 透明度[0,1]  alpha  #000
                  颜色(255,255,255 白色)  #fff

    
     */
      .bar{width:100px;height: 100px;position: fixed;bottom:300px;right:20px;overflow:hidden}
      .icon,.bg{position: absolute;top: 0;left: 0;width:100%;height:100%}
      .icon{background-color: blue;}
      .bg{background-color: rgba(255,255,255,.5);
      /* 固定的原点  bg围绕这个点进行的旋转 */
          transform-origin: left bottom;
          /*角度旋转的动画  =>  角度让bg 隐藏下icon模块的下面*/
           transform: rotate(90deg);
           transition: all  .3s ease;
      }
      .bar:hover .bg{
        /* 结合transition过渡 */
        transform: rotate(0deg);
      }

      /* 
      transition 过渡动画
      1.transition-property  过渡动画属性名称（css属性）
      2.transition-duration  过渡动画持续时间（时间越长 动画越慢 反之越快）
      3.transition-timing-funcition  过渡动画动画运动的曲线（ease匀速）
      4.transition-delay  过渡动画动画延迟的时间

      复合属性： transition:transition-property     transition-duration    transition-timing-funcition   transition-delay

      transition:width 1s ease 2s;
      
       */
  </style>

</head>

<body>
  <!-- 小米 -->
  <div class="main">
    <div class="left"></div>
    <div class="right">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>


  <!-- 游戏 -->
  <div class="wrap">
    <div class="inner">
      <div class="item">
        <img src="https://s.syzs.qq.com/syzs_cms/202011/1endbjnp00.r3bit9dsjvg.jpeg" alt="">
      </div>
      <div class="item">
        <img src="https://s.syzs.qq.com/syzs_cms/202011/1endbjnp00.r3bit9dsjvg.jpeg" alt="">
      </div>
      <div class="item">
        <img src="https://s.syzs.qq.com/syzs_cms/202011/1endbjnp00.r3bit9dsjvg.jpeg" alt="">
      </div>
    </div>
  </div>


  <!-- 百度 -->
  <div class="bar">
     <div class="icon"></div>
     <div class="bg"></div>
  </div>
</body>

</html>